<template>
  <div class="login_container">
    <div class="login_box">
      <div style="margin: 20px 10px; text-align: center; font-size: 24px">
        <b>登录</b>
      </div>
      <!-- 用户名-->
      <el-form ref="LoginFormRef" :model="loginForm" :rules="LoginFormRules">
        <el-form-item prop="policeId">
          <el-input
            size="medium"
            style="
              margin: 10px 10px;
              width: 300px;
              margin-left: 25px;
              font-size: 18px;
            "
            v-model="loginForm.policeId"
            prefix-icon="el-icon-user"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <!-- 密码-->
        <el-form-item prop="userPassword">
          <el-input
            size="medium"
            style="
              margin: 10px 10px;
              width: 300px;
              margin-left: 25px;
              font-size: 18px;
            "
            show-password
            v-model="loginForm.userPassword"
            prefix-icon="el-icon-lock"
            type="password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <div style="margin: 10px 0; text-align: center">
          <el-button type="primary" size="large" @click="login">登录</el-button>
          <el-button type="warning" size="large" @click="resetLoginForm"
            >重置</el-button
          >
          <!-- <el-button type="primary">主要按钮</el-button>
          <el-button type="success">成功按钮</el-button>
          <el-button type="warning">警告按钮</el-button>
          <el-button type="danger">危险按钮</el-button>
          <el-button type="info">信息按钮</el-button>
          <el-button type="text">文本按钮</el-button> -->
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { Login } from "@/api/api";
export default {
  name: "Login",
  methods: {
    login() {
      this.$refs["LoginFormRef"].validate(async (valid) => {
        if (valid) {
          const res = await Login(this.loginForm.policeId,this.loginForm.userPassword);
          if (res.code == "200") {
            console.log(res);
            localStorage.setItem("user", JSON.stringify(res.data)); //存储用户信息到浏览器
            this.$router.push("/home");
            this.$message.success("登录成功");
          } else {
            this.$message.error(res.msg);
          }
        }
      });
    },
  },
  data() {
    // data 函数是一个特殊的选项，它应该返回一个对象，这个对象包含了组件的响应式数据。
    // 在 Vue 组件的模板或其他方法中，你可以通过 this.loginForm.policeId 和 this.loginForm.userPassword 来访问或修改这些数据。并且，由于这些数据是响应式的，当它们被修改时，任何依赖于这些数据的视图或计算属性都会自动更新。
    // 在 Vue 的实例或组件的 created 钩子被调用之前，Vue 会开始创建组件的实例，并在创建过程中调用 data 函数来获取组件的初始数据状态。
    return {
      loginForm: {
        policeId: "",
        userPassword: "",
      },
      LoginFormRules: {
        policeId: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        userPassword: [
          { required: true, message: "请输入密码", trigger: "blur" },
        ],
      },
    };
  },
};
</script>

<style scoped>
.login_container {
  background-color: rgba(0, 70, 155, 0.5);
  height: 100%;
  /* background-color: transparent; 设置背景为透明 */
}

.login_box {
  width: 400px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
